<template>
  <div class="class">
    <header>
      <div class="seniorCareerPlanClass">
        <div class="container">
          <a href="">
            <div class="seniorClassBox">
              <h2>{{seniorClass.title}}</h2>
              <p>{{seniorClass.content}}</p>
              <div class="btn"><el-button>{{seniorClass.btn}}</el-button></div>
            </div>
          </a>
        </div>
      </div>
    </header>
    <main>
      <div class="majorUnscramble">
        <div class="container">
          <div class="title">
            <div class="titleName">专 <span>/</span> 业 <span>/</span> 解 <span>/</span> 读</div>
          </div>
          <div class="content">
            <div class="contLeft">
              <div
                  v-for="(item,index) in majorList"
                  :key="index"
                  class="majorBox">
                <a href=""><span>{{item}}</span></a>
              </div>
            </div>
            <div class="contRight">
              <div v-for="item in 6"
                   :key="item"
                   class="unscrambleBox">
                <a href="">
                  <div class="img"><img src="../../assets/img/400343522390933504.png" alt=""></div>
                  <div class="unscrambleName">电子商务类 . 旅游管理类</div>
                  <div class="unscrambleInfo">
                    <div class="unscrambleInfoLeft">
                      <i class="el-icon-user"></i>
                      <span> xxx</span>
                    </div>
                    <div class="unscrambleInfoRight">
                      <i class="el-icon-video-play"></i>
                      <span> 19786 </span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="majorIntroduce">
        <div class="container">
          <div class="title">
            <div class="titleName">职 <span>/</span> 业 <span>/</span> 介 <span>/</span> 绍</div>
          </div>
          <div class="content">
            <div class="contLeft">
              <div
                v-for="(item,index) in majorList"
                :key="index"
                class="majorBox">
                <a href=""><span>{{item}}</span></a>
              </div>
            </div>
            <div class="contRight">
              <div v-for="item in 6"
                   :key="item"
                   class="unscrambleBox">
                <a href="">
                  <div class="img"><img src="../../assets/img/400343522390933504.png" alt=""></div>
                  <div class="unscrambleName">电子商务类 . 旅游管理类</div>
                  <div class="unscrambleInfo">
                    <div class="unscrambleInfoLeft">
                      <i class="el-icon-user"></i>
                      <span> xxx</span>
                    </div>
                    <div class="unscrambleInfoRight">
                      <i class="el-icon-video-play"></i>
                      <span> 19786 </span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="majorUnscramble">
        <div class="container">
          <div class="title">
            <div class="titleName">职 <span>/</span> 业 <span>/</span> 介 <span>/</span> 绍</div>
          </div>
          <div class="content">
            <div class="contLeft">
              <div
                v-for="(item,index) in majorList"
                :key="index"
                class="majorBox">
                <a href=""><span>{{item}}</span></a>
              </div>
            </div>
            <div class="contRight">
              <div v-for="item in 6"
                   :key="item"
                   class="unscrambleBox">
                <a href="">
                  <div class="img"><img src="../../assets/img/400343522390933504.png" alt=""></div>
                  <div class="unscrambleName">电子商务类 . 旅游管理类</div>
                  <div class="unscrambleInfo">
                    <div class="unscrambleInfoLeft">
                      <i class="el-icon-user"></i>
                      <span> xxx</span>
                    </div>
                    <div class="unscrambleInfoRight">
                      <i class="el-icon-video-play"></i>
                      <span> 19786 </span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
    export default {
        name: "class",
        data() {
            return {
                seniorClass: {
                    title: 'Senior Career Plan Class',
                    content: 'Learn from a career teacher, master the methods of knowing yourself, exploring the world, choosing courses and filling out voluntary applications, and lay a foundation for life planning',
                    btn: 'See the course'
                },
                majorList: ['工学','法学','教育学','经济学','工学','法学','教育学','经济学','工学','法学','教育学','经济学']
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../styles/common.scss';
  @import '../../styles/class/class.scss';
</style>